<template>
    <div>
<!--        首页第一行-->
<!--        <el-breadcrumb separator-class="el-icon-arrow-right">-->
<!--            <el-breadcrumb-item >🏠</el-breadcrumb-item>-->

<!--        </el-breadcrumb>-->
        <div class="yidihang">
<!--            第一行里的最新帖子盒子-->
            <div class="zuixintiezi">
<!--            帖子标题-->
                  <div class="zuixintiezi2">
                      ★最新帖子
                  </div>
<!--                一条帖子的框框，从这里开始v-for遍历-->
                <div class="biankuang" v-for="(p,index) in shouyexinxilist.topic10" :key="index">
                <span class="paixv">
                    <div v-if="index<=2" >
                     <router-link :to="{name:'tiezixiangqing',
                                 query:{id:p.id

                                 }}">   <el-tag type="danger" size="mini">{{index+1}}
                     </el-tag>

                         {{p.contentOrTitle | tiezifilter}}
                     </router-link>
                    </div>
                    <div v-else-if="index<=5">
                        <el-tag type="success" size="mini">{{index+1}}</el-tag>
                        <router-link :to="{name:'tiezixiangqing',
                                 query:{id:p.id

                                 }}">{{p.contentOrTitle | tiezifilter}}</router-link>
                    </div>
                    <div v-else-if="index<=8">
                        <el-tag type="warning" size="mini">{{index+1}}</el-tag>
                        <router-link :to="{name:'tiezixiangqing',
                                 query:{id:p.id

                                 }}">{{p.contentOrTitle | tiezifilter}}</router-link>
                    </div>
                    <div v-else>
                        <el-tag type="info" size="mini">{{index+1}}</el-tag>
                        <router-link :to="{name:'tiezixiangqing',
                                 query:{id:p.id

                                 }}">{{p.contentOrTitle | tiezifilter}}</router-link>
                    </div>
                </span>

                </div>
            </div>
<!--                第二行里的最新文章盒子-->
            <div class="zuixintiezi">
                <div class="zuixintiezi2">
                    ★最新文章
                </div>
                <div class="biankuang" v-for="(p,index) in shouyexinxilist.article10" :key="index">
                    <span class="paixv">
                    <div v-if="index<=2" >
                        <el-tag type="info" size="mini">{{index+1}}</el-tag>
                        <router-link :to="{name:'wenzhangxiangqing',
                                 query:{id:p.id

                                 }}">{{p.contentOrTitle | tiezifilter}}</router-link>
                    </div>
                    <div v-else-if="index<=5">
                        <el-tag type="success" size="mini">{{index+1}}</el-tag>
                         <router-link :to="{name:'wenzhangxiangqing',
                                 query:{id:p.id
                                 }}">
                            {{p.contentOrTitle}}
                         </router-link>
                    </div>
                    <div v-else-if="index<=8">
                        <el-tag type="warning" size="mini">{{index+1}}</el-tag>
                         <router-link :to="{name:'wenzhangxiangqing',
                                 query:{id:p.id
                                 }}">
                            {{p.contentOrTitle}}
                         </router-link>
                    </div>
                    <div v-else>
                        <el-tag type="info" size="mini">{{index+1}}</el-tag>
                         <router-link :to="{name:'wenzhangxiangqing',
                                 query:{id:p.id
                                 }}">
                            {{p.contentOrTitle}}
                         </router-link>
                    </div>
                </span>
                </div>
            </div>
<!--            第三列-->
            <div class="zuixintiezi">
                <div class="zuixintiezi2">
                    ★今日之星
                </div>
                <div class="biankuang" v-for="(p,index) in shouyexinxilist.user10" :key="index">
                    <span class="paixv">
                    <div v-if="index<=2" >
                        <el-tag type="danger" size="mini">{{index+1}}</el-tag>
                        <router-link :to="{name:'yonghuxinxichaxun',
                                 query:{id:p.id
                                 }}">
                        <el-avatar :src="p.avatar" :size="20"/>
                            {{p.userName}}
                        <div style="float: right">
                            {{p.count}}
                        </div>
                        </router-link>
                    </div>
                    <div v-else-if="index<=5">
                        <el-tag type="success" size="mini">{{index+1}}</el-tag>
                         <router-link :to="{name:'yonghuxinxichaxun',
                                 query:{id:p.id
                                 }}">
                        <el-avatar :src="p.avatar" :size="20"/>
                            {{p.userName}}
                        <div style="float: right">
                            {{p.count}}
                        </div>
                        </router-link>
                    </div>
                    <div v-else-if="index<=8">
                        <el-tag type="warning" size="mini">{{index+1}}</el-tag>
                         <router-link :to="{name:'yonghuxinxichaxun',
                                 query:{id:p.id
                                 }}">
                        <el-avatar :src="p.avatar" :size="20"/>
                            {{p.userName}}
                        <div style="float: right">
                            {{p.count}}
                        </div>
                        </router-link>
                    </div>
                    <div v-else>
                        <el-tag type="info" size="mini">{{index+1}}</el-tag>
                         <router-link :to="{name:'yonghuxinxichaxun',
                                 query:{id:p.id
                                 }}">
                        <el-avatar :src="p.avatar" :size="20"/>
                            {{p.userName}}
                        <div style="float: right">
                            {{p.count}}
                        </div>
                        </router-link>
                    </div>
                </span>

                </div>

            </div>
        </div>
<!--        首页第二行-->
        <el-row style="right: 1px; margin-top: 10px; color: #cd5c5c ; font-size: 30px;">
            ★今日热点:
        </el-row>
        <div style="height: 500px ; display: flex">
            <div class="jinrirediang1">
                <router-link :to="{name:'wenzhangxiangqing',
                                 query:{id:shouyexinxilist.article2[0].id
                                 }}">
                    <!--            帖子标题-->
                    <div style=" font-size: 26px">
                        {{shouyexinxilist.article2[0].title}}
                    </div>
                    <!--                一条帖子的框框，从这里开始v-for遍历-->
                    <div style="margin-top: 20px" >

                        <div v-html="shouyexinxilist.article2[0].content.length > 600 ? shouyexinxilist.article2[0].content.slice(0, 600) + '...' :shouyexinxilist.article2[0].content" />
                    </div>
                </router-link>
            </div>
            <div class="jinrirediang1">
                <router-link :to="{name:'wenzhangxiangqing',
                                 query:{id:shouyexinxilist.article2[1].id
                                 }}">
                    <!--            热点标题-->
                    <div style=" font-size: 26px">
                        {{shouyexinxilist.article2[1].title}}
                    </div>
                    <!--                一条帖子的框框，从这里开始v-for遍历-->
                    <div  style="margin-top: 20px">

                        <div v-html="shouyexinxilist.article2[1].content.length > 600 ? shouyexinxilist.article2[1].content.slice(0, 600) + '...' :shouyexinxilist.article2[1].content" />
                    </div>
                </router-link>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "shouyezhangshi",
        data(){
            return{
                shouyexinxilist:{
                    article2: [{},{}]
                }
            }
        },
        created() {
            this.shouyexinxi()
        },
        methods:{
         async   shouyexinxi(){
                // const token = sessionStorage.getItem("token");
                // this.$http.defaults.headers.common['Authorization'] = token;
                const {data: res} = await this.$http.get('homePage')
                // console.log(res.data)
                this.shouyexinxilist = res.data
            }
        },
        filters: {
            tiezifilter(value) {
                if (!value) return "";
                if (value.length > 10) {
                    return value.slice(0, 10) + "...";
                }
                return value;
            },
        },

    }
</script>

<style scoped>
.yidihang{
    display: flex;
    width: 100%;
    height: 300px;
}
    .zuixintiezi{
        height: 100%;
        width: 33%;
        padding-left: 15px;
        border: white solid 5px;
        background: #FFFACD;
    }
    .paixv{
        width: 20px;
        height: 5px;
        background-color: lightgoldenrodyellow;
        color: black;

    }
    .biankuang{
        border: solid 1px;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .jinrirediang1{
        width: 48%;
        height: 480px;
        background: lightgoldenrodyellow;
        border: white solid 2px;
        margin-left: 1%;
        color: black;
        overflow: hidden;
        text-align: center;
    }
/*最新帖子标题的样式*/
.zuixintiezi2{
    width: 60%;
    height: 35px;
    margin-left: 72px;
    padding: 2px;
    text-align: center;
    color: black;
    line-height: 2em;
    font-size: 20px;
}
</style>
